## Summary

This is a follow up to EUI's Emotion conversion of
**EuiFormControlLayout/Delimited** (see
#190752,
elastic/eui#7954, and
elastic/eui#7957).

> [!note]
> Please manually QA your team's affected form control(s) to confirm
they still look and behave as expected and are non-broken. The EUI team
is not familiar enough with each plugin's setups to pull down and QA
this PR ourselves.

While QA testing the upgrade, I noticed a few incorrect usages of
**EuiFormControlLayout** but wanted to wait until after the upgrade to
push out fixes (to prevent delaying the PR further). In general, here is
EUI's [recommended usage of the
component](https://eui.elastic.co/#/forms/form-controls#form-control-layout):

- Where possible, **simply don't use it**. Almost all form controls are
**already** automatically wrapped in any EuiFormControlLayout by
default, and should accept a large majority of the props that the layout
accepts.
- If you **must** use it, set the `controlOnly` prop on the child
input/control to avoid buggy styling (e.g. duplicate borders).
- If you can't do either of the above for any reason (e.g. missing prop
support), reach out to the EUI team to ask for your UX as a feature
request!

### Checklist

Delete any items that are not applicable to this PR.

- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

## Summary

This is a follow up to EUI's Emotion conversion of
**EuiFormControlLayout/Delimited** (see
elastic#190752,
elastic/eui#7954, and
elastic/eui#7957).

> [!note]
> Please manually QA your team's affected form control(s) to confirm
they still look and behave as expected and are non-broken. The EUI team
is not familiar enough with each plugin's setups to pull down and QA
this PR ourselves.

While QA testing the upgrade, I noticed a few incorrect usages of
**EuiFormControlLayout** but wanted to wait until after the upgrade to
push out fixes (to prevent delaying the PR further). In general, here is
EUI's [recommended usage of the
component](https://eui.elastic.co/#/forms/form-controls#form-control-layout):

- Where possible, **simply don't use it**. Almost all form controls are
**already** automatically wrapped in any EuiFormControlLayout by
default, and should accept a large majority of the props that the layout
accepts.
- If you **must** use it, set the `controlOnly` prop on the child
input/control to avoid buggy styling (e.g. duplicate borders).
- If you can't do either of the above for any reason (e.g. missing prop
support), reach out to the EUI team to ask for your UX as a feature
request!

### Checklist

Delete any items that are not applicable to this PR.

- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

(cherry picked from commit fd7b86e)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Fix various EuiFormControlLayout usages
(#192779)](#192779)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Cee
Chen","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-09-24T20:55:59Z","message":"Fix
various EuiFormControlLayout usages (#192779)\n\n## Summary\r\n\r\nThis
is a follow up to EUI's Emotion conversion
of\r\n**EuiFormControlLayout/Delimited**
(see\r\nhttps://github.com//pull/190752,\r\nhttps://github.com/elastic/eui/pull/7954,
and\r\nhttps://github.com/elastic/eui/pull/7957).\r\n\r\n> [!note]\r\n>
Please manually QA your team's affected form control(s) to
confirm\r\nthey still look and behave as expected and are non-broken.
The EUI team\r\nis not familiar enough with each plugin's setups to pull
down and QA\r\nthis PR ourselves.\r\n\r\nWhile QA testing the upgrade, I
noticed a few incorrect usages of\r\n**EuiFormControlLayout** but wanted
to wait until after the upgrade to\r\npush out fixes (to prevent
delaying the PR further). In general, here is\r\nEUI's [recommended
usage of
the\r\ncomponent](https://eui.elastic.co/#/forms/form-controls#form-control-layout):\r\n\r\n-
Where possible, **simply don't use it**. Almost all form controls
are\r\n**already** automatically wrapped in any EuiFormControlLayout
by\r\ndefault, and should accept a large majority of the props that the
layout\r\naccepts.\r\n- If you **must** use it, set the `controlOnly`
prop on the child\r\ninput/control to avoid buggy styling (e.g.
duplicate borders).\r\n- If you can't do either of the above for any
reason (e.g. missing prop\r\nsupport), reach out to the EUI team to ask
for your UX as a feature\r\nrequest!\r\n\r\n### Checklist\r\n\r\nDelete
any items that are not applicable to this PR.\r\n\r\n- [x] Any UI
touched in this PR is usable by keyboard only (learn more\r\nabout
[keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n-
[x] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"fd7b86e209e7133f3d9b7bd4e9fd6542f8a3aaad","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","EUI","v9.0.0","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-infra_services","Team:obs-ux-management","apm:review","v8.16.0"],"title":"Fix
various EuiFormControlLayout
usages","number":192779,"url":"https://github.com/elastic/kibana/pull/192779","mergeCommit":{"message":"Fix
various EuiFormControlLayout usages (#192779)\n\n## Summary\r\n\r\nThis
is a follow up to EUI's Emotion conversion
of\r\n**EuiFormControlLayout/Delimited**
(see\r\nhttps://github.com//pull/190752,\r\nhttps://github.com/elastic/eui/pull/7954,
and\r\nhttps://github.com/elastic/eui/pull/7957).\r\n\r\n> [!note]\r\n>
Please manually QA your team's affected form control(s) to
confirm\r\nthey still look and behave as expected and are non-broken.
The EUI team\r\nis not familiar enough with each plugin's setups to pull
down and QA\r\nthis PR ourselves.\r\n\r\nWhile QA testing the upgrade, I
noticed a few incorrect usages of\r\n**EuiFormControlLayout** but wanted
to wait until after the upgrade to\r\npush out fixes (to prevent
delaying the PR further). In general, here is\r\nEUI's [recommended
usage of
the\r\ncomponent](https://eui.elastic.co/#/forms/form-controls#form-control-layout):\r\n\r\n-
Where possible, **simply don't use it**. Almost all form controls
are\r\n**already** automatically wrapped in any EuiFormControlLayout
by\r\ndefault, and should accept a large majority of the props that the
layout\r\naccepts.\r\n- If you **must** use it, set the `controlOnly`
prop on the child\r\ninput/control to avoid buggy styling (e.g.
duplicate borders).\r\n- If you can't do either of the above for any
reason (e.g. missing prop\r\nsupport), reach out to the EUI team to ask
for your UX as a feature\r\nrequest!\r\n\r\n### Checklist\r\n\r\nDelete
any items that are not applicable to this PR.\r\n\r\n- [x] Any UI
touched in this PR is usable by keyboard only (learn more\r\nabout
[keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n-
[x] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"fd7b86e209e7133f3d9b7bd4e9fd6542f8a3aaad"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/192779","number":192779,"mergeCommit":{"message":"Fix
various EuiFormControlLayout usages (#192779)\n\n## Summary\r\n\r\nThis
is a follow up to EUI's Emotion conversion
of\r\n**EuiFormControlLayout/Delimited**
(see\r\nhttps://github.com//pull/190752,\r\nhttps://github.com/elastic/eui/pull/7954,
and\r\nhttps://github.com/elastic/eui/pull/7957).\r\n\r\n> [!note]\r\n>
Please manually QA your team's affected form control(s) to
confirm\r\nthey still look and behave as expected and are non-broken.
The EUI team\r\nis not familiar enough with each plugin's setups to pull
down and QA\r\nthis PR ourselves.\r\n\r\nWhile QA testing the upgrade, I
noticed a few incorrect usages of\r\n**EuiFormControlLayout** but wanted
to wait until after the upgrade to\r\npush out fixes (to prevent
delaying the PR further). In general, here is\r\nEUI's [recommended
usage of
the\r\ncomponent](https://eui.elastic.co/#/forms/form-controls#form-control-layout):\r\n\r\n-
Where possible, **simply don't use it**. Almost all form controls
are\r\n**already** automatically wrapped in any EuiFormControlLayout
by\r\ndefault, and should accept a large majority of the props that the
layout\r\naccepts.\r\n- If you **must** use it, set the `controlOnly`
prop on the child\r\ninput/control to avoid buggy styling (e.g.
duplicate borders).\r\n- If you can't do either of the above for any
reason (e.g. missing prop\r\nsupport), reach out to the EUI team to ask
for your UX as a feature\r\nrequest!\r\n\r\n### Checklist\r\n\r\nDelete
any items that are not applicable to this PR.\r\n\r\n- [x] Any UI
touched in this PR is usable by keyboard only (learn more\r\nabout
[keyboard accessibility](https://webaim.org/techniques/keyboard/))\r\n-
[x] Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"fd7b86e209e7133f3d9b7bd4e9fd6542f8a3aaad"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Cee Chen <[email protected]>